<template>
  <div class="goods-list">
    <template v-for="(goodsRow, index) in goodsList2D">
      <div class="goods-list-row" :key="index">
        <router-link tag="div" class="goods-list-item" v-for="item in goodsRow" :key="item.sku" @click="goTo(item.sku)" :to="'/goods/' + item.sku">
          <div class="goods-thumb"><img v-lazy="item.thumb" /></div>
          <div class="goods-title">{{item.title}}</div>
          <div class="goods-bottom">
            <div class="goods-price">
              <strong>{{item.price | moneyBefore}}</strong><span>.{{item.price | moneyAfter}}</span>
            </div>
            <!--<span class="goods-supplier">{{item.supplier_idx | supplier}}</span>-->
          </div>
        </router-link>
      </div>
    </template>
  </div>
</template>
<script>
import {SUPPLIER} from '@/libs/config'
export default {
  props: ['goodsList'],
  computed: {
    goodsList2D () {
      let data = this.goodsList
      let list = []
      let num = Math.ceil(data.length / 2)
      for (let i = 0; i < num; i++) {
        list.push(data.slice(i * 2, i * 2 + 2))
      }
      return list
    }
  },
  filters: {
    supplier (value) {
      return SUPPLIER[value] || '可伴自营'
    },
    moneyBefore (value) {
      return value.split('.')[0]
    },
    moneyAfter (value) {
      return value.split('.')[1]
    }
  },
  methods: {
    goTo (sku) {
      console.log(sku)
    }
  }
}
</script>
<style lang="less" scoped>
.goods-list-row{
  display: flex;
  justify-content: space-between;
}
.goods-list-row+.goods-list-row{
  margin-top: 20*@rex;
}
.goods-list-item{
  width: 265*@rex;
  background: @white;
  box-sizing: border-box;
}
.goods-list-item+.goods-list-item{
  margin-left: 20*@rex;
}
.goods-thumb{
  width: 265*@rex;
  height: 265*@rex;
  background: url('../../assets/images/img_placeholder.png') center center no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    max-width: 100%;
    max-height: 100%;
    display: block;
  }
}
.goods-title{
  height: 48*@rex;
  line-height: 48*@rex;
  padding: 0 10*@rex;
  font-size: @font-normal;
  color: @text-black;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 5px;
}
.goods-bottom{
  overflow: hidden;
  padding: 0 10*@rex 10*@rex;
}
.goods-price{
  float: left;
  line-height: 24*@rex;
  color: @text-red;
  overflow: hidden;
  strong{
    font-size: @font-large;
    font-weight: normal;
  }
  span{
    padding-top: 4*@rex;
    font-size: @font-small;
  }
}
.goods-supplier{
  float: right;
  margin-top: 6*@rex;
  line-height: 28*@rex;
  padding: 3*@rex 6*@rex;
  font-size: @font-small;
  border: 1*@rex solid @text-gray;
  color: @text-gray;
}
</style>
